<template>
  <div>
    <div class="tl-form-line-title">
      项目风险
      <div class="toolbar">
        <el-button type="text" size="medium" icon="el-icon-document-add" @click="openAddDialogOrNew('editForm')" v-if="!disableSave">新增</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table class="tl-table" ref="mainTable" :height="240" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName" :cell-class-name="doChangeCellClassName">
      <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
      <el-table-column prop="dispriskproperty" label="风险性质" width="85px" sortable="custom" sort-by="riskproperty" align="center" header-align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dispriskproperty === '机会'" type="success">机会</el-tag>
          <el-tag v-else type="danger">威胁</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dispriskstatus" label="风险状态" width="85px" sortable="custom" sort-by="riskstatus" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="riskdescription" label="风险描述" min-width="235px" sortable="custom" sort-by="riskdescription" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispriskprobability" label="风险可能性" width="150px" sortable="custom" sort-by="riskprobability" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispriskinfluencelevel" label="风险影响程度" width="150px" sortable="custom" sort-by="riskinfluencelevel" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="disprisklevel" label="风险等级" width="85px" class="risk-level-col" sortable="custom" sort-by="risklevel" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="influencequantization" label="风险影响评估" min-width="250px" sortable="custom" sort-by="influencequantization" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="riskmeasure" label="风险应对计划" min-width="250px" sortable="custom" sort-by="riskmeasure" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="riskmeasuredue" label="计划完成日期" width="120px" sortable="custom" sort-by="riskmeasuredue" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" width="95px" v-slot="scope" fixed="right">
        <el-dropdown trigger="hover">
          <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看</el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit" @click.native="openEditDialog('editForm', scope.row.id)" v-if="!disableSave">编辑</el-dropdown-item>
            <el-dropdown-item icon="el-icon-delete" @click.native="doDelete(scope.row.id)" v-if="!disableSave">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-table-column>
    </el-table>
    <tl-edit ref="editForm" @refresh="doRefresh" :projectinfo="projectinfo"></tl-edit>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import tlEdit from './editComponent'
/** 常量 **/
import topscommConst from '@tapui/const/tapConst'
import { validateNull } from '@tapui/utils/validate'
/** 工具类 */
import { Loading } from 'element-ui'

import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  name: 'mpmProjectRisk',
  mixins: [mixin_list],
  components: { tlEdit },
  props: {
    projectinfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disableSave: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      description: '项目风险-列表查询',
      urlPrefix: '/mpm/projectRisk/',
      url: {
        queryCodeList: '/mpm/projectRisk/dataCodeList'
      },
      reduceHeight: 264,
      // 根据风险等级 降序排序
      sorterInfo: {
        sidx: 'risklevel',
        sord: 'desc'
      },
      // 分页参数
      pageInfo: {
        currentPage: 1,
        pageSize: 2000
      }
    }
  },
  watch: {
    'projectinfo.id': {
      handler: function(newVal, oldVal) {
        this.loadData({})
      }
    }
  },
  methods: {
    // 刷新列表
    doRefresh() {
      this.loadData({})
    },
    // 风险等级列样式匹配
    doChangeCellClassName({ row, column }) {
      if (column.property === 'disprisklevel') {
        switch (row.risklevel) {
          case '0':
            return 'low-level'
          case '1':
            return 'middle-level'
          case '2':
            return 'high-level'
        }
      }
    },
    beforeLoadData() {
      // 用户只能查看当前项目下的数据
      this.queryParam.qry_projectid = this.projectinfo.id
      // 新增项目，不存在项目id，不加载风险表数据
      if (validateNull(this.queryParam.qry_projectid)) {
        this.datas = []
        return false
      }
      return true
    },
    // 双击判断查看还是编辑页面
    doRowDbClick(row, column, event) {
      this.disableSave ? this.openViewDialog('editForm', row.id) : this.openEditDialog('editForm', row.id)
    },
    // 如果立项未保存，自动保存立项并打开项目风险页面；立项已保存，打开项目风险新增页面
    openAddDialogOrNew(editForm) {
      if (this.projectinfo.id) {
        this.openAddDialog(editForm)
      } else {
        this.$tap
          .confirm('新增项目风险前需要先保存项目立项申请单，是否保存？')
          .then((_) => {
            // 调用父组件保存，保存成功后打开弹框
            this.$emit('saveAndOpenRiskDialog')
          })
          .catch((_) => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$riskLevels: high, middle, low;
$riskColors: #ff6363, #ffe119, #bfef45;
//for 循环 根据风险低中高 匹配颜色和字体样式
@for $i from 1 through 3 {
  .el-table /deep/ .#{nth($riskLevels,$i)}-level {
    background-color: nth($riskColors, $i);
    //背景红色 则加粗
    @if $i == 1 {
      font-weight: bold;
    }
    color: #303133 !important;
  }
}
.el-drawer__body {
  overflow: unset;
}
.app-container {
  margin: 0;
}
</style>
